<template>
  <div class="notice">
    <div class="notice_left">
      <div :class="['notice_item', item.isSelect ? 'currBd' : '']" v-for="(item, index) in list" :key="index"
        @click="switchNotice(item)">
        <div class="title_box">
          <el-tooltip class="item" :disabled="checkOverflow(item.logTheme)" effect="dark" :content="item.logTheme"
            placement="top-start">
            <span ref="logTheme_box" class="logTheme_box" v-show="lang === 'cn'">{{
              item.logTheme
            }}</span>
          </el-tooltip>

          <el-tooltip :disabled="checkOverflow(item.logThemeEn)" class="item" effect="dark" :content="item.logThemeEn"
            placement="top-start">
            <span ref="logTheme_box" class="logTheme_box" v-show="lang === 'en'">{{
              item.logThemeEn
            }}</span>
          </el-tooltip>

          <el-tooltip :disabled="checkOverflow(item.logThemePt)" class="item" effect="dark" :content="item.logThemePt"
            placement="top-start">
            <span ref="logTheme_box" class="logTheme_box" v-show="lang === 'pt'">{{
              item.logThemePt
            }}</span>
          </el-tooltip>

          <span class="new_box" v-show="index === 0">New</span>
        </div>
        <div class="date_box">
          <span>{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</span>
        </div>
      </div>
    </div>
    <div v-show="lang === 'cn'" class="notice_right" v-html="currData.themeContent"></div>
    <div v-show="lang === 'en'" class="notice_right" v-html="currData.themeContentEn"></div>
    <div v-show="lang === 'pt'" class="notice_right" v-html="currData.themeContentPt"></div>
  </div>
</template>

<script>
import { split } from 'lodash';

export default {
  name: 'notice',

  data() {
    return {
      currData: {
        themeContent: '',
      },
      lang: localStorage.getItem('lang'),
    };
  },
  computed: {
    checkOverflow() {
      return function (str) {
        let bool = true;
        if (str && str.length > 15) {
          bool = false;
        }
        return bool;
      };
    },
  },
  props: {
    list: {
      type: Array,
    },
  },
  watch: {
    list: {
      handler: function (newValue) {

        this.handleData();
      },
      deep: true,
    },
  },
  created() {
    this.handleData();
  },

  methods: {
    switchNotice(row) {
      this.list.map((m) => (m.isSelect = false));
      row.isSelect = true;
      this.currData = row;
    },
    handleData() {
      console.log('this.list', this.list);

      this.currData = this.list[0];
    },
  },
};
</script>

<style lang="scss" scoped>
.notice {
  display: flex;
  justify-content: space-between;
  height: 500px;

  .notice_left {
    width: 23%;
    overflow: auto;
    padding: 10px;

    .notice_item {
      background: rgba(213, 213, 213, 0.25);
      border: 1px solid rgba(9, 76, 133, 0.12);
      cursor: pointer;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;

      .title_box {
        display: flex;
        justify-content: space-between;

        span {
          display: inline-block;
          margin-bottom: 15px;
        }

        >.logTheme_box {
          font-size: 15px;
          color: rgba(80, 80, 80, 0.9);
          font-weight: bold;
          display: inline-block;
          /* 或者 inline-block; 根据需求选择 */
          width: 160px;
          /* 设置一个固定的宽度 */
          white-space: nowrap;
          /* 确保文本不会换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 使用省略号表示超出的文本 */
        }

        >.new_box {
          font-size: 11px;
          border-radius: 7px;
          background: #ea2727;
          color: #ffffff;
          padding: 3px 4px;
        }
      }

      .date_box {
        span {
          font-size: 13px;
          color: 口rqba(80, 80, 80, 0.68);
        }
      }
    }
  }

  .notice_right {
    width: 75%;
    overflow: auto;
    background: #f7f8fa;
    padding: 10px 25px;
  }

  .currBd {
    border: 1px solid rgb(9 76 133 / 45%) !important;
  }
}
</style>
